<template>
  <div class="home-container">
    <van-nav-bar title="技术文章" fixed />
    <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleInfo v-for="item in artList" :key="item.art_id" :cover="item.cover" :time="item.pubdate" :count="item.comm_count" :author="item.aut_name" :title="item.title"></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/articleApi.js'
import ArticleInfo from '@/components/Article/ArticleInfo'
export default {
  name: 'Home',
  data() {
    return {
      page: 1,
      limit: 10,
      artList: [],
      loading: true,
      finished: false,
      refreshing: false
    }
  },
  components: {
    ArticleInfo
  },
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList(isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      console.log(res)
      // this.artList = [...this.artList, ...res]
      // this.loading = false
      if (isRefresh) {
        this.artList = [...res, ...this.artList]
        // this.loading = false
      } else {
        this.artList = [...this.artList, ...res]
        this.loading = false
      }

      if (res.length === 0) {
        this.finished = true
      }
    },
    // 只要onload被调用就请求下页数据
    onLoad() {
      this.page++
      this.initArticleList()
    },
    onRefresh() {
      this.page++
      this.initArticleList(true)
      this.refreshing = false
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  background-color: lightblue;
  padding: 46px 0 50px 0;
}
</style>
